<template>
	<div class="add-sence" v-if="showEditScene">
		<el-dialog title="编辑业务场景" :visible.sync="showEditScene" width="45%" :before-close="closeEditScene">
			<div class="add-content">
				<el-form :model="form" :rules="rules" ref="sceneFrom" label-width="120px" class="demo-ruleForm">
					<el-form-item label="业务场景名称" prop="sceneName">
						<el-input v-model="form.sceneName"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="close" @click="closeEditScene">关 闭</el-button>
				<el-button class="sure" @click="sureEditScene">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { validateSceneName } from '@/utils/formValidate';
export default {
	props: {
		showEditScene: {
			type: Boolean,
			required: true,
			default: () => false
		},
		editSceneData: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			form: {
				sceneName: ''
			},
			rules: {
				sceneName: [
					{ required: true, message: '请输入业务场景名称', trigger: 'blur' },
					{ validator: validateSceneName, trigger: ['blur'] }
				]
			}
		};
	},
	mounted() {
		this.form = JSON.parse(JSON.stringify(this.editSceneData));
	},
	methods: {
		closeEditScene() {
			this.$emit('closeEditScene');
		},
		sureEditScene() {
			this.$refs.sceneFrom.validate(valid => {
				if (valid) {
					const editName = this.form.sceneName;
					this.$emit('sureEditScene', editName);
					this.$refs.sceneFrom.resetFields();
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less">
.add-sence {
	.el-dialog__body {
		padding: 10px 20px;
	}
	.el-input {
		input {
			height: 32px;
		}
	}
}
</style>

<style lang="less" scoped>
.add-sence {
	.el-button {
		width: 56px;
		height: 32px;
		padding: 0;
		font-size: 14px;
	}
	.close {
		color: #999;
	}
	.sure {
		background-color: #6384fe;
		color: #fff;
	}
}
</style>
